<template>
  <div class="map-box com-container">
    <el-row>
      <el-col>
        <el-button type="primary" @click="sankey">显示线段</el-button>
      </el-col>
      <el-col>
        <el-button type="primary" @click="sankey1">255</el-button>
      </el-col>
    </el-row>
    <div class="com-chart" id="cesiumContainer"></div>
    <canvas id="sanjitu"></canvas>
  </div>
</template>
<script>
import * as echarts from "echarts";
// import * as $ from "jquery";
var viewer = null;

var myChart;
import { bd09towgs84 } from "../utils/bdtowgs";
export default {
  data() {
    return {
      juhe: 0,
      arrcollect: [],
      datalength: null,
      number: "", //输入学号
      detetime: "", //输入日期
      action: "", //输入行为
      roomname: "", //位置
      dataArr: [],
      objAll: [], //前面的数据
      objNew: [], //每次新得到的数据
      samePosition: [],
      samePositionCol: [],
      isDianShow: true,
      isXianShow: true,
      idXian: [],
      idDian: [],
      maximumHeights: [],
      minimumHeights: [],
    };
  },
  mounted() {
    var Cesium = this.Cesium;
    viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false, // 是否显示动画控制
      baseLayerPicker: false, // 底图背景选择框
      geocoder: false, // 右上角查找放大镜
      timeline: false, // 时间线是否显示
      sceneModePicker: false, // 二维三维投影方式显示
      navigationHelpButton: false, // 取消右上角的问号
      homeButton: false, // 首页按钮
      sceneMode: Cesium.SceneMode.SCENE3D, // 2D、3D模式： SCENE2D |MORPHING
      infoBox: false,
      imageryProvider: new Cesium.OpenStreetMapImageryProvider({
        url: "https://a.tile.openstreetmap.org/",
      }),
    });
    viewer._cesiumWidget._creditContainer.style.display = "none";
  },
  methods: {
    getData() {
      const self = this;
      self
        .$http({
          method: "post",
          url: "http://localhost:10520/api/user/studenttrace",
          data: {
            number: self.number,
            detetime: self.detetime,
            action: self.action,
            roomname: self.roomname,
          },
        })
        .then((res) => {
          this.objNew = res.data;
          for (var i = 0; i < this.objNew.length; i++) {
            var bdto = bd09towgs84(this.objNew[i].lon, this.objNew[i].lat);
            this.objNew[i].lon = bdto[0];
            this.objNew[i].lat = bdto[1];
          }
        });
    },
    drawChart() {
      var chartDom = document.getElementById("sanjitu");

      myChart = echarts.init(chartDom);
      var option = {
        series: {
          type: "sankey",
          layout: "none",
          emphasis: {
            focus: "adjacency",
          },
          data: [],
          links:[],
        },
      };
      myChart.setOption(option);

      // this.$nextTick(() => {
      //   var chartDom = document.getElementById("sanjitu");

      //   myChart = echarts.init(chartDom);
      //   var option;
      //   $.get("../assets/test.json", function (data) {
      //     myChart.hideLoading();

      //     myChart.setOption(
      //       (option = {
      //         title: {
      //           text: "学生行为路径分析",
      //           left: 100,
      //         },
      //         tooltip: {
      //           trigger: "item",
      //           triggerOn: "mousemove",
      //         },
      //         series: [
      //           {
      //             type: "sankey",
      //             emphasis: {
      //               focus: "adjacency",
      //             },
      //             nodeAlign: "left",
      //             data: data.nodes,
      //             links: data.links,
      //             lineStyle: {
      //               color: "source",
      //               curveness: 0.5,
      //               nodeWidth: 200,
      //               nodeGap: 2000,
      //             },
      //           },
      //         ],
      //       })
      //     );
      //   });
      //   console.log(myChart);
      //   option && myChart.setOption(option);
      // });
    },
    sankey() {
      this.drawChart();
    },
    sankey1() {
      var canvas = document.getElementById("sanjitu");
      // var ctx = canvas.getContext("2d");
      console.log(canvas);
      var dataUrl = canvas.toDataURL();
      // moveTo(114.369421);
      viewer.entities.add({
        position: this.Cesium.Cartesian3.fromDegrees(114.369421, 30.519924, 0),
        box: {
              // fill:true,
          dimensions: new this.Cesium.Cartesian3(2000, 0, 1000),
          material: dataUrl,
          outline: true,
          outlineColor: this.Cesium.Color.white,
        },
      });
      viewer.zoomTo(viewer.entities);
    },

  },
};
</script>

<style scoped>
.map-box {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}
#cesiumContainer {
  width: 100%;
  height: 80vh;
  position: absolute;
}
#sanjitu {
  display: none;
}
</style>
